import React from "react";
import { useDispatch } from "react-redux";
import { reactionAdded } from "./postsSlices";

const reactionEmoji = {
  thumbsUp: '👍',
  hooray: '🎉',
  heart: '❤️',
  rocket: '🚀',
  eyes: '👀'
}

export const ReactionButtons = ({post}) => {
  const dispatch = useDispatch()
  const reactionButtons = Object.entries(reactionEmoji).map(([name, emoji]) => {
    return (
      <button
        key={name} className="muted-button reaction-button"
        onClick={() => dispatch(reactionAdded({id: post.id, reaction: name}))}
      >
        {emoji} {post.reactions[name]}
      </button>
    )
  })

  return <div>{reactionButtons}</div>
}